<template>
  <div class="home">

    <!-- <div class="button">
        <button
      :class="{ active: tabIndex === index }"
      @click="theIndex(index, item.name)"
      v-for="(item, index) in listNavigation"
      :key="index"
    >
      {{ item.title }}
    </button>
</div> -->
    
    <!-- <button @click="GotheAlllist"> 9个列表随便跳转</button> -->
    <div class="top">
      <div class="thelogo" @click="toggleadd()" ><van-icon name="add" size="25" /></div>
     <div class="seach"> <van-search placeholder="平菇" @click="clicsearch()" />  </div>
      <div class="bars"><van-icon name="bars" size="25" /> </div>
      <div class="bell"><van-icon name="bell" size="25" /> </div>
    </div>

    <van-tabs  route>

      <van-tab line-width="20" color="#ffc533"
        :class="{ active: index }"
        v-for="(item, index) in listNavigation"
        :title="item.title"
        :key="index"
        route
        
        :title-style = "{active: index  }" 
        
        :to="{name: item.name}"
        @click="theIndex(index, item.name)"
      >

        <!-- {{ item.name }} -->


        <!-- <div><h6>第几个</h6> </div> -->
      </van-tab>

      <div>
        <!-- 分类组件的三级路由插座 -->
        <router-view></router-view>
      </div>

      <!-- <template>
        <div class="slide">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>轮播图内容1</van-swipe-item>
            <van-swipe-item>轮播图内容2</van-swipe-item>
            <van-swipe-item>轮播图内容3</van-swipe-item>
            <van-swipe-item>轮播图内容4</van-swipe-item>
          </van-swipe>
        </div>
      </template> -->

      <!-- 内容 -->
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "Home",

  data() {
    return {
      listNavigation: [
        { title: "关注", name: "Attention" },
        { title: "推荐", name: "Recommend"},
        { title: "笔记", name: "Note"},
        { title: "视频", name: "Video"},
        { title: "活动", name: "Activity"},
        { title: "母婴", name: "MotherAndbaby"},
        { title: "鲜味厨房", name: "Kitchen"},
        { title: "安佳烘焙", name: "Bake" },
        { title: "节气", name: "Solarterms"},
      ],
      productData: [],

      tabIndex: 0,
    };
  },

  created() {
    
    // console.log(this.$route);

    for (let i = 0; i < this.listNavigation.length; i++) {
        if (this.$route.name === this.listNavigation[i].name) {

            this.tabIndex = i;
            break;
        }
        
    }
    //  console.log("this.axios==>",this.axios);
    // this.getRecommend();
    // console.log("this");
  },

  methods: {
    //下标
    theIndex(index, name) {
      if (this.tabIndex === index) {
        return;
      }
      this.tabIndex = index;

      this.$router.push({ name });
    },

    //跳转到关注
    GotheAlllist() {
      this.$router.push({
        name: "Attention",
        query: {
          id: 1000,
          list: 1,
        },
      });
    },

    // +号查看详情
    toggleadd(){
      this.$router.push({ name:"Tiaoz"});
    },
    //点击搜索跳转
    clicsearch(){
      this.$router.push({ name:"Seatiaoz"});
    }


    //  getRecommend(){
    //     this.axios({
    //         method:"get",
    //         // url:"https://apis.netstart.cn/douguo/config.json",
    //         //get请求参数写在params中

    //     }).then(result => {
    //        console.log("result==>",result); //输出结果看一下
    //         // this.productData = result.data.result;

    //     }).catch(err => {
    //       console.log("err==>",err);  //用来捕获错误

    //         // console.log("err==>",err);
    //     })
    //  },

    //关注列表
    // getRecommend() {
    //   this.axios({
    //     method: "get",
    //     url: "https://apis.netstart.cn/douguo/home/ffeeds/0/20?offset=0&limit=20&关注列表=",
    //     //get请求参数写在params中
    //     params: {
    //       appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
    //       offset: "0",
    //       limit: "20",
    //     },
    //   })
    //     .then((result) => {
    //       console.log("result==>", result); //输出结果看一下
    //       // this.productData = result.data.result;
    //     })
    //     .catch((err) => {
    //       console.log("err==>", err); //用来捕获错误

    //       // console.log("err==>",err);
    //     });
    // },


  },
};
</script>

<style lang="less" scoped>
.active {
  background-color: #e4393c;

}
::deep van-tab.active {
  background-color: #e4393c;
}

.home {
  .top {
    padding: 16px 16px 0px 16px ;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    align-content: center;
    background-color: white;

    .thelogo {
      width: 25px;
      background-color: black;
      border-radius: 50%;
      height: 100%;
      background-color: white;
      margin:  auto 0;
      color: #ffca2e;
      .seach{
        padding: 10px 0;
      }
      
    }
  }
  .active{
    font-size: 25px;
    font-weight: 900;
    color: #2a2a2a;
    position: absolute;
    bottom: 0.4rem;
    left: 0;
    z-index: 1;
    width: 0.8667rem;
    height: 0.12rem;
    background-color: #ffc533;
    border-radius: 0.08rem;
  }
  :deep .van-tabs__wrap .van-tab--active {
    font-size: 25px;
    font-weight: 900;
    color: #2a2a2a;
   
}
 :deep .van-tabs__line {
    position: absolute;
    bottom: 0.4rem;
    left: 0;
    z-index: 1;
    width: 0.8667rem;
    height: 0.12rem;
    background-color: #ffc533;
    border-radius: 0.08rem;
}


  .slide {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
    ::v-deep .van-swipe__indicators {
      position: absolute;
      bottom: 0.32rem;
      left: 50%;
      display: flex;
    }
    ::v-deep .van-swipe__indicator {
      width: 13px;
      height: 0.3px;
      border-radius: 0;
      padding: 2px;
      background-color: #6ebeee;
      opacity: 0.9;
      transition: opacity 0.2s, background-color 0.2s;
    }
  }
}
</style>
